<!--  这里写第二行的 echart 可以参考第一行的 vue 文件  -->
<template>
  <!-- 这里是 html 部分 -->
  <div class="rowTwo">
    <!-- 这里是 第一行的最外层盒子 -->
    <div class="box" id="等级发布企业总数">
      <div
        style="
          position: absolute;
          width: 110px;
          top: 50px;
          right: 5px;
          z-index: 9;
        "
      >
        <!-- 这个盒子是用来放下拉选择框的 -->
        <el-select v-model="value" placeholder="请选择年份">
          <!-- 这个是下拉选择框 -->
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
          <!-- 这个是下拉选择框的选项 -->
        </el-select>
      </div>
      <!-- 这里是 第一行第一列的盒子 -->
      <div class="col_1 echarts" id="rowTwo_col_1"></div>
      <!-- 这里是 第一行第一列用来放 echarts 的盒子 -->
    </div>
    <div class="box">
      <!-- 这里是 第一行第二列的盒子 -->
      <div class="col_2 echarts" id="rowTwo_col_2"></div>
      <!-- 这里是 第一行第二列用来放 echarts 的盒子 -->
    </div>
    <div class="box">
      <div class="col_3 echarts" id="rowTwo_col_3"></div>
      <!-- 这里是 第一行第三列用来放 echarts 的盒子 -->
    </div>
  </div>
</template>

<script>
// 引入 echarts 才可以使用
import * as echarts from "echarts";
export default {
  // 当前 vue 文件的 名称
  name: "row2",
  // 当前页面可以使用的数据
  data() {
    return {
      // 这个是 下拉框可以选择的数据 label 是显示的文字  value 是你选则好了 会存到 value 里
      options: [
        {
          value: 1, // 这个一般使用数字
          label: "有效期内",
        },
        {
          value: 2,
          label: "全部",
        },
      ],
      // 这个是用来存 选中项的 value
      value: 1,
      // 这个是用来记录次数的  可以整除2的时候为透明色  不可以整除2的时候为自己定的颜色 起到一个状态作用
      colorFlage: 0,
    };
  },
  // 这个是这个页面一加载就会执行这个 mounted 函数
  mounted() {
    // 执行下面这个函数，用来渲染第一行第一列的
    // 第一个参数 document.querySelector('#rowOne_col_1') 是 echart 要放到哪里
    // 第二个参数是要显示的标题
    this.getCol1(
      document.querySelector("#rowTwo_col_1"),
      "2.1诚信企业发布-等级占比饼形图(家)"
    );
    // 执行下面这个函数，用来渲染第一行第二列的
    this.getCol2(
      document.querySelector("#rowTwo_col_2"),
      "2.2诚信企业发布-等级占比柱状图(家次)"
    );
    // 执行下面这个函数，用来渲染第一行第三列的
    this.getCol3(
      document.querySelector("#rowTwo_col_3"),
      "2.3诚信企业发布-行业占比漏斗图(家次)"
    );
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal) {
          //  调接口重新获取数据
          // this.changeCol1();
          this.getCol1(
            document.querySelector("#rowTwo_col_1"),
            "2.1诚信企业发布-等级占比饼形图(家)"
          );
        }
      },
    },
  },
  // 这里面就是一些方法 就好比你写的是 (function() {})() 立即执行函数 不用调用就自己执行了
  // 但是下面这种只有调用才会执行 在 mounted 里调用 页面加载完就调方法然后拿数据
  methods: {
    // 2.1
    async getCol1(domName, title) {
      let url;
      if (this.value === 1) {
        // this.value 就是 data 中的 value
        // 有效期
        url = "http://172.16.1.170:8080/cxdsj/dsjAction.cxyxqSelect.do";
      } else {
        // 全部
        url = "http://172.16.1.170:8080/cxdsj/dsjAction.djcountalljSelect.do";
      }
      const { data } = await this.$http.get(url);
      // console.log("2.1.1", data);
      let res = data.substring(5);
      let cxdj = eval("(" + res + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: "2.1诚信企业发布-等级占比饼形图(家)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // legend: {
        //   // 图例的朝向
        //   orient: 'horizontal',
        //   bottom: '10%',
        // },
        series: [
          {
            name: "诚信等级占比",
            type: "pie",
            center: ["50%", "60%"],
            radius: "60%",
            // bottom: '25%',
            // data: [
            //   { value: 1048, name: 'A级' },
            //   { value: 735, name: 'B级' },
            //   { value: 580, name: 'C级' },
            //   { value: 484, name: 'D级' },

            // ],
            label: {
              fontSize: 20,
            },
            data: cxdj,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    // 2.2  这个你仿照 第一个写  记得 接口返回的数据 要放到外面的 data 里  定义了不会执行  所以要在页面初始完执行
    async getCol2(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.djcountalljcSelect.do"
      );
      // console.log('2.2', data);
      var res = data.substring(5);
      let cxdjzbJc = eval("(" + res + ")");
      // console.log("2.2", cxdjzbJc);
      const myChart = echarts.init(document.querySelector("#rowTwo_col_2"));
      // 2.指定配置
      // var option = {
      //   title: {
      //     text: "2.2诚信企业发布-等级占比饼形图(家次)",
      //     textStyle: {
      //       color: "#ffffff",
      //       fontsize: "20px",
      //       fontweight: "bolder",
      //       fontStyle: "normal",
      //     },
      //     top: "3%",
      //     left: "center",
      //   },
      //   toolbox: {
      //     feature: {
      //       // saveAsImage: { show: true }, // 导出图片
      //       myFull: {
      //         // 全屏
      //         show: true,
      //         title: "全屏",
      //         icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
      //         onclick: () => {
      //           // 全屏查看
      //           if (domName.requestFullScreen) {
      //             // HTML W3C 提议
      //             domName.requestFullScreen();
      //           } else if (domName.msRequestFullscreen) {
      //             // IE11
      //             domName.msRequestFullScreen();
      //           } else if (domName.webkitRequestFullScreen) {
      //             // Webkit
      //             domName.webkitRequestFullScreen();
      //           } else if (domName.mozRequestFullScreen) {
      //             // Firefox
      //             domName.mozRequestFullScreen();
      //           }
      //           // 退出全屏
      //           if (domName.requestFullScreen) {
      //             document.exitFullscreen();
      //           } else if (domName.msRequestFullScreen) {
      //             document.msExitFullscreen();
      //           } else if (domName.webkitRequestFullScreen) {
      //             document.webkitCancelFullScreen();
      //           } else if (domName.mozRequestFullScreen) {
      //             document.mozCancelFullScreen();
      //           }
      //         },
      //       },
      //     },
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{b} : {c} ({d}%)",
      //   },
      //   series: [
      //     {
      //       name: "访问来源",
      //       type: "pie",
      //       radius: "60%",
      //       center: ["50%", "60%"],
      //       color:['#FE5050', '#1DB7E5'],
      //       // color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
      //       // data: [{
      //       //         value: 285,
      //       //         name: '黑名单查询'
      //       //     },
      //       //     {
      //       //         value: 410,
      //       //         name: '红名单查询'
      //       //     },
      //       //     {
      //       //         value: 274,
      //       //         name: '法人行政处罚'
      //       //     },
      //       //     {
      //       //         value: 235,
      //       //         name: '其它查询'
      //       //     }
      //       // ]
      //       data: cxdjzbJc.sort(function (a, b) {
      //         return a.value - b.value;
      //       }),
      //       roseType: "radius",

      //       label: {
      //         normal: {
      //           formatter: ["{c|{c}次}", "{b|{b}}"].join("\n"),
      //           rich: {
      //             c: {
      //               color: "rgb(241,246,104)",
      //               fontSize: 20,
      //               fontWeight: "bold",
      //               lineHeight: 5,
      //             },
      //             b: {
      //               color: "rgb(98,137,169)",
      //               fontSize: 15,
      //               height: 40,
      //             },
      //           },
      //         },
      //       },
      //       labelLine: {
      //         normal: {
      //           lineStyle: {
      //             color: "rgb(98,137,169)",
      //           },
      //           smooth: 0.2,
      //           length: 10,
      //           length2: 20,
      //         },
      //       },
      //       itemStyle: {
      //         normal: {
      //           shadowColor: "rgba(0, 0, 0, 0.8)",
      //           shadowBlur: 50,
      //         },
      //       },
      //     },
      //   ],
      // };
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        grid: {
          top: "20%",
          bottom: "10%",
        },
        // backgroundColor: "#0f375f",
        barWidth: 15,
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        xAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            //  改变x轴字体颜色和大小
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          type: "category",
          // data: ['响水大', '滨海南', '滨海北'],
          data: cxdjzbJc.map((item) => {
            return item.name;
          }),
          // y轴逆向显示
          inverse: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变y轴颜色
            lineStyle: {
              color: "#2c4054",
            },
          },
          axisLabel: {
            //  改变y轴字体颜色和大小
            //formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 16,
            },
          },
        },
        series: [
          {
            type: "bar",
            // name: "产出",
            barWidth: 40,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF",
                    fontSize: 16,
                    fontWeight: 600,
                  },
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(20,144,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(15,144,255,0)",
                  },
                ]),
                barBorderRadius: 15,
              },
            },
            // data: [19, 29, 39]
            data: cxdjzbJc.map((item) => {
              return item.value;
            }),
          },
        ],
      };
      // // 3.把配置项给实例对象
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 2.3
    async getCol3(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.hyzsjcSelect.do"
      );
      // console.log('2.3', data);
      let res = data.substring(5);
      let cxdjhyZb = eval("(" + res + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: "2.3诚信企业发布-行业占比漏斗图(家次)",
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "行业占比",
            type: "funnel",
            width: "70%",
            height: "80%",
            left: "center",
            top: "20%",
            bottom: "5%",
            label: {
              fontSize: 15,
              color: '#ccc'
            },
            labelLine: {
              show: true,
              length: 35,
            },
            // data: [
            //   { value: 1060, name: '机械' },
            //   { value: 1030, name: '纺织' },
            //   { value: 1000, name: '煤矿' },
            //   { value: 800, name: '危险化学品' },
            //   { value: 100, name: '轻工' },
            //   { value: 600, name: '石油天然气' },
            //   { value: 60, name: '烟花爆竹' },
            //   { value: 50, name: '有色' },
            //   { value: 180, name: '烟草' },
            //   { value: 109, name: '建材' },
            //   { value: 30, name: '金属非金属矿山和尾矿库' },
            //   { value: 100, name: '商贸' },
            //   { value: 80, name: '冶金' },
            //   { value: 100, name: '其他' }
            // ]
            data: cxdjhyZb,
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option); //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    // 这个是第1行第3列 年份改变出发  调接口获取数据
    // changeCol3() {
    //   switch (this.value) {
    //     case "选项1":
    //       this.col3Data = [150, 460, 40, 100, 70, 180, 150];
    //       break;
    //     case "选项2":
    //       this.col3Data = [250, 60, 50, 100, 170, 280, 120];
    //       break;
    //     case "选项3":
    //       this.col3Data = [350, 160, 90, 140, 50, 80, 110];
    //       break;
    //   }
    //   this.getCol3(document.querySelector("#rowOne_col_3"), "1.3折线图");
    // },
  },
};
</script>

<style lang="less" scoped>
.rowTwo {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>

